<!-- 使用说明
<selectTimePicker ref="selectTimePicker" @getTime="getTime" :preTime="formData.busTime"></selectTimePicker>

import selectTimePicker from '@/components/pageComponents/sp-store/select-time-picker/index.vue';
components: {
	selectTimePicker
},

openSelectTimePicker() {
	this.$refs.selectTimePicker.open();
},
getTime(e) {
	console.log('营业时间', e);
	this.busTime = e;
},
 -->
<template>
	<view>
		<u-popup :show="show" @close="close">
			<view class="head">
				<view @click="close('cancel')" class="btn">取消</view>
				<view class="title">选择时间段</view>
				<view @click="close('confirm')" class="btn confirm">确定</view>
			</view>
			<view class="select-Inter">
				<view @click="selectInter('start')" :class="{ active: interActive === 'start' }" class="tit">
					<view>开始时间</view>
					<view>{{ start.hours }}:{{ start.minutes }}</view>
				</view>
				<view @click="selectInter('end')" :class="{ active: interActive === 'end' }" class="tit">
					<view>结束时间</view>
					<view>{{ end.hours }}:{{ end.minutes }}</view>
				</view>
			</view>
			<view class="content">
				<view class="hours">
					<scroll-view scroll-y="true" :scroll-into-view="hToview" style="height: 50vh;">
						<view @click="selecHour(index)" :id="'t' + item" v-for="(item, index) in hoursArr" :class="{ active: hCurIndex === index }" class="li">{{ item }}时</view>
					</scroll-view>
				</view>
				<view class="minutes">
					<scroll-view scroll-y="true" :scroll-into-view="mToview" style="height: 50vh;">
						<view @click="selecMinute(index)" :id="'t' + item" v-for="(item, index) in minutesArr" :class="{ active: mCurIndex === index }" class="li">
							{{ item }}分
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	props: ['preTime'],
	data() {
		return {
			show: false,
			hoursArr: '',
			minutesArr: '',

			hToview: '',
			mToview: '',

			interActive: 'start',
			hCurIndex: '',
			mCurIndex: '',

			start: {
				hours: '',
				minutes: '',
				hoursIndex: 0,
				minutesIndex: 0
			},
			end: {
				hours: '',
				minutes: '',
				hoursIndex: 0,
				minutesIndex: 0
			},

			time: ''
		};
	},
	methods: {
		open() {
			this.show = true;
			this.initFun();
			Promise.all([this.initFindFun()]).finally(() => {
				this.setValueFun();
				this.findValue();
			});
		},
		close(val) {
			this.show = false;
			if (val === 'confirm') {
				let time = {
					openHour: this.start.hours,
					openMin: this.start.minutes,
					closeHour: this.end.hours,
					closeMin: this.end.minutes
				};
				this.$emit('getTime', time);
			}
		},
		initFun() {
			let hoursArr = [];
			for (let h = 0; h < 24; h++) {
				h = String(h).length < 2 ? `0${h}` : h;
				hoursArr.push(h);
			}
			this.hoursArr = hoursArr;

			let minutesArr = [];
			for (let m = 0; m < 60; m++) {
				m = String(m).length < 2 ? `0${m}` : m;
				minutesArr.push(m);
			}
			this.minutesArr = minutesArr;
		},
		// 选择区间
		selectInter(val) {
			this.interActive = val;
			this.setValueFun();
			this.findValue();
		},
		// 选择时分
		selecHour(index) {
			if (this.interActive === 'start') {
				this.start.hoursIndex = index;
			} else {
				this.end.hoursIndex = index;
			}
			this.setValueFun();
		},
		selecMinute(index) {
			if (this.interActive === 'start') {
				this.start.minutesIndex = index;
			} else {
				this.end.minutesIndex = index;
			}
			this.setValueFun();
		},
		// 赋值
		setValueFun() {
			this.start.hours = this.hoursArr[this.start.hoursIndex];
			this.start.minutes = this.minutesArr[this.start.minutesIndex];
			this.end.hours = this.hoursArr[this.end.hoursIndex];
			this.end.minutes = this.minutesArr[this.end.minutesIndex];
			if (this.interActive === 'start') {
				this.hCurIndex = this.start.hoursIndex;
				this.mCurIndex = this.start.minutesIndex;
			} else {
				this.hCurIndex = this.end.hoursIndex;
				this.mCurIndex = this.end.minutesIndex;
			}
		},
		// 时间滚动位置
		findValue() {
			this.hToview = `t${this.hoursArr[this.hCurIndex]}`;
			this.mToview = `t${this.minutesArr[this.mCurIndex]}`;
		},
		// 接收父组件的当前时间
		initFindFun() {
			return new Promise(resolve => {
				this.start.hoursIndex = this.hoursArr.indexOf(this.preTime.openHour);
				this.start.minutesIndex = this.minutesArr.indexOf(this.preTime.openMin);
				this.end.hoursIndex = this.hoursArr.indexOf(this.preTime.closeHour);
				this.end.minutesIndex = this.minutesArr.indexOf(this.preTime.closeMin);
				resolve();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		font-weight: bold;
	}
	.btn {
		padding: 24rpx;
		box-sizing: border-box;
		color: #ccc;
	}
	.confirm {
		color: $u-primary;
	}
}
.select-Inter {
	display: flex;
	.tit {
		padding: 24rpx;
		box-sizing: border-box;
		text-align: center;
	}
	.active {
		color: $u-primary;
	}
}
.content {
	display: flex;
	justify-content: space-around;
	.hours,
	.minutes {
		flex: 1;
		text-align: center;
		.li {
			margin: 34rpx 0;
		}
		.active {
			color: $u-primary;
		}
	}
}
</style>
